<template>
  <div class="app-container">
    <!-- 搜索框 -->
    <data-select
      :search-data="search"
      :button-data="buttonData"
      @return-search="searchAction"
      @return-reset="reset"
    />
    <!-- 表格 -->
    <data-table
      :table-data="tableData"
      :column="column"
      :pagination.sync="pagination"
      @search-event="getListBySearch"
    />
    <!-- 新增编辑 -->
    <supplier-detail
      ref="detail"
      @resetList="getListBySearch"
    />
  </div>
</template>

<script>
import DataSelect from '@/components/DataSelect'
import DataTable from '@/components/DataTable'
import SupplierDetail from './detail'
import imsApi from '@/api/ims/ims'

export default {
  name: '',
  components: {
    DataSelect,
    DataTable,
    SupplierDetail
  },
  data() {
    return {
      // 搜索框参数
      search: {
        supplyInfoCode: {
          label: this.$t('ims.supplier.supplyInfoCode'),
          value: null, type: 'input'
        },
        supplyInfoName: {
          label: this.$t('ims.supplier.supplyInfoName'),
          value: null, type: 'input'
        },
        supplyTypeCode: {
          label: this.$t('ims.supplier.supplyTypeCode'),
          value: null,
          type: 'select',
          option: {
            selectOptions: [
              {
                label: '是',
                value: '1'
              },
              {
                label: '否',
                value: '0'
              }
            ]
          },
          event: {
            change: this.handleClick
          }
        },
        groupName: {
          label: this.$t('ims.supplier.groupName'),
          value: null,
          type: 'input'
        },
        relevanceMerchandise: {
          label: this.$t('ims.supplier.relevanceMerchandise'),
          value: null,
          type: 'input'
        },
        merchandiseGroupCode: {
          label: this.$t('ims.supplier.merchandiseGroupCode'),
          value: null,
          type: 'input'
        }
      },
      // 表格参数
      // 表格上方操作按钮，比如新增
      buttonData: [
        {
          label: this.$t('common.create'),
          action: this.addClick
        }
      ],
      column: {
        // 表头
        data: [
          {
            label: this.$t('ims.supplier.groupName'),
            prop: 'groupName',
            show: true
          },
          {
            label: this.$t('ims.supplier.supplyInfoCode'),
            prop: 'supplyInfoCode',
            show: true,
            width: '280px'
          },
          {
            label: this.$t('ims.supplier.supplyInfoName'),
            prop: 'supplyInfoName',
            show: true
          },
          {
            label: this.$t('ims.supplier.supplyTypeCode'),
            prop: 'supplyTypeCode',
            show: true
            // format: (row) => {
            //   return row.status == "1" ? "生效" : "未生效";
            // },
          },

          {
            label: this.$t('ims.supplier.relevanceMerchandise'),
            prop: 'relevanceMerchandise',
            show: true,
            format: (row) => {
              // eslint-disable-next-line eqeqeq
              return row.relevanceMerchandiseCount == '0' ? '否' : '是'
            }
          },
          {
            label: this.$t('ims.supplier.merchandiseGroupCode'),
            prop: 'merchandiseGroupCode',
            show: true
          }
        ],
        // 表格中的操作列
        operation: {
          label: this.$t('common.operation'),
          data: [
            {
              label: this.$t('common.edit'),
              action: this.edit
            },
            {
              label: this.$t('common.delete'),
              action: this.del
            }
          ]
        }
      },
      // 分页
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      searchData: {},
      tableData: []
    }
  },
  mounted() {
    this.getListBySearch()
  },
  created() {
    if (this.$route.params.parentSearch) {
      const parentSearch = this.$route.params.parentSearch
      this.searchData = parentSearch
      this.setSearch(parentSearch)
    }
    this.$nextTick(() => {
      this.getListBySearch()
    })
  },
  methods: {
    handleClick() {
    },
    // 获取列表数据
    getListBySearch() {
      const param = Object.assign(this.searchData, this.pagination)
      console.log('start => imsApi.getSupplyByPage')
      imsApi.getSupplyByPage(param).then((res) => {
        console.log('res = ' + res)
        this.tableData = res.data.list
        this.pagination = res.data.pagination
      })
    },
    // 重置
    reset(type) {
      this.pagination.pageNum = 1
      this.searchData = {}
      this.getListBySearch()
    },
    // 给搜索组件赋值
    setSearch(parentSearch) {
      for (const key in this.search) {
        const val = this.search[key]
        // eslint-disable-next-line eqeqeq
        if (val.constructor == Object) {
          console.log(parentSearch)
          for (const parentKey in parentSearch) {
            const parent = parentSearch[parentKey]
            // eslint-disable-next-line eqeqeq
            if (key == parentKey) {
              this.search[key].value = parent
            }
          }
        }
      }
    },
    addClick(data, e) {
      imsApi.getApplicationList().then((res) => {
        this.$refs.detail.applicationList = res.data
        this.$refs.detail.info = {
          applicationCode: '',
          productName: '',
          version: '',
          status: '0',
          productMenuGroup: [],
          productMenuGroupVOList: [],
          productParamVOList: []
        }
        this.$refs.detail.dialogColumn = [
          {
            paramName: null,
            paramKey: null,
            paramValue: null
          }
        ]
        this.$nextTick(() => {
          this.$refs.detail.title = this.$t('common.create')
          this.$refs.detail.isAdd = true
          this.$refs.detail.show()
        })
      })
    },
    edit(data, e) {
      Promise.all([
        imsApi.getSupplyMerchandiseGroupDetail(data.guid)
      ]).then((res) => {
        this.$refs.detail.applicationList = res[0].data
        this.$refs.detail.info = res[0].data
        this.$refs.detail.info.supplyInfoName = data.supplyInfoName
        this.$nextTick(() => {
          this.$refs.detail.title = this.$t('common.edit')
          this.$refs.detail.isAdd = false
          this.$refs.detail.show()
        })
      })
    },
    del(data, e) {
      this.$confirm(
        this.$t('common.confirmDel'),
        this.$t('common.prompt'),
        {
          confirmButtonText: this.$t('common.ok'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning',
          closeOnClickModal: false
        }
      ).then(() => {
        imsApi.deleteSupplyMerchandiseGroup(data.guid).then(res => {
          this.$message.success(this.$t('common.delSuccess'))
          this.dialogVisible = false
          this.getListBySearch(data)
        })
      }).catch(() => {
      })
    },
    searchAction(data) {
      this.pagination.pageNum = 1
      this.searchData = data
      this.getListBySearch(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs-container {
  background-color: #ffffff;
}
</style>
